<div class="bf-staff">
  <!--确认弹窗-->
  <p-confirmDialog acceptLabel="确认" rejectLabel="取消"></p-confirmDialog>
  <!--消息提示-->
  <p-messages  [closable]="true" [style]="{'position':'fixed','left': '10vw','top': '0','margin-top': '0','width': '100vw','z-index':'9999'}"></p-messages>
  <!--顶部按钮-->
  <div class="bf-staff-header">
    <div class="ui-g-6">
      <div class="ui-g-1 bf-staff-header-btn bf-staff-header-btn-add" (click)="staffAddClick()" [hidden]="this.btnHiden[0].hidden">
        <img class="bf-staff-header-img-add" src="assets/images/ic_add.png" alt="">
        <span>增 加</span>
      </div>
      <div class="ui-g-1 bf-staff-header-btn bf-staff-header-btn-modify" (click)="staffModifyClick()" [hidden]="this.btnHiden[1].hidden">
        <img class="bf-staff-header-img-modify" src="assets/images/ic_modify.png" alt="">
        <span>修 改</span>
      </div>
      <div class="ui-g-1 bf-staff-header-btn bf-staff-header-btn-delete" (click)="staffDeleteClick()" [hidden]="this.btnHiden[2].hidden">
        <img class="bf-staff-header-img-delete" src="assets/images/ic_delete.png" alt="">
        <span>删 除</span>
      </div>
<!--      <div class="ui-g-1 bf-staff-header-btn bf-staff-header-btn-delete" (click)="staffDeleteClick()" [hidden]="this.btnHiden[2].hidden">-->
<!--        <img class="bf-staff-header-img-delete" src="assets/images/ic_delete.png" alt="">-->
<!--        <span>删 除</span>-->
<!--      </div>-->
      <div class="ui-g-1 bf-staff-header-btn bf-staff-header-btn-delete" style="background: #0D7689;width: 7vw" (click)="staffResetClick()" [hidden]="this.btnHiden[3].hidden">
        <span>重 置 密 码</span>
      </div>
    </div>
    <!--搜索-->
    <div class="ui-inputgroup bf-staff-header-search" *ngIf="!btnHiden[4].hidden">
      <input type="text" pInputText placeholder="请输入员工姓名" [(ngModel)]="searchInputData">
      <button id="disabled-btn" class="bf-staff-header-btn-search" type="button"  (click)="staffSearchClick()">搜索</button>
    </div>
  </div>
  <!--表格-->
  <div class="bf-staff-table">
    <rbi-check-table-btn [select]="staffSelect" (selectData)="selectData($event)" [option]="optionTable" (detail)="staffDetailClick($event)"></rbi-check-table-btn>
  </div>
  <!--增加弹窗-->
  <p-dialog header="信息添加" [(visible)]="staffAddDialog" [width]="900" >
    <!--Content-->
    <p-scrollPanel [style]="{width:'100%',height: '70vh'}" styleClass="custombar">

    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'3vh'}">
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[0]}">
        <div class="ui-g-4" style="text-align: right">
          <label ><span style="color: red">*</span>部门名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input type="text" pInputText placeholder="请选择部门.." (click)="DepartTreeClick('add')" [(ngModel)]="staffAdd.departmentName"/>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[1]}">
        <div class="ui-g-4" style="text-align: right">
          <label for="addusername"><span style="color: red">*</span>用户名：</label>
        </div>
        <div class="ui-g-8">
          <input id="addusername" type="text" pInputText placeholder="请输入用户名" [(ngModel)]="staffAdd.username"  (blur)="changeInput(staffAdd.username, 1)">
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[2]}">
        <div class="ui-g-4" style="text-align: right">
          <label for="addrealName"><span style="color: red">*</span>真实姓名：</label>
        </div>
        <div class="ui-g-8">
          <input id="addrealName" type="text" pInputText placeholder="请输入真实姓名" [(ngModel)]="staffAdd.realName"  (blur)="changeInput(staffAdd.realName, 2)">
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[3]}">
        <div class="ui-g-4" style="text-align: right">
          <label ><span style="color: red">*</span>性别：</label>
        </div>
        <div class="ui-g-8">
            <p-radioButton type="radio" label="男"  value="男" name="group"  [(ngModel)]="staffAdd.sex" (onClick)="changeInput(staffAdd.sex, 3)"></p-radioButton>
            <p-radioButton type="radio" label="女"  value="女" name="group" [ngStyle]="{'margin-left':'2vw'}" [(ngModel)]="staffAdd.sex" (onClick)="changeInput(staffAdd.sex, 3)"></p-radioButton>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[4]}">
        <div class="ui-g-4" style="text-align: right">
          <label for="addmobilePhone"><span style="color: red">*</span>手机号码：</label>
        </div>
        <div class="ui-g-8">
          <input id="addmobilePhone" type="number" pInputText placeholder="请输入手机号码" [(ngModel)]="staffAdd.mobilePhone" (blur)="changeInput(toolSrv.verifyPhone, 4)" maxLength="11">
          <p-message  severity="error" text="请输入符合规定的11位手机号(13/17/14/15/18开头的格式)" [hidden]="(staffAdd.mobilePhone === undefined || staffAdd.mobilePhone === '')? !toolSrv.verifyPhone.test(staffAdd.mobilePhone): toolSrv.verifyPhone.test(staffAdd.mobilePhone)"></p-message>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addidentity">身份证号：</label>
        </div>
        <div class="ui-g-8">
          <input id="addidentity" type="number" pInputText placeholder="请输入身份证号" [(ngModel)]="staffAdd.identity">
          <p-message  severity="error" text="请输入符合规定的身份证号码" [hidden]="(staffAdd.identity === undefined || staffAdd.identity === '')? (!this.toolSrv.verifyIdNumber.test(staffAdd.identity) || !this.toolSrv.verifyIdNumber1.test(staffAdd.identity) || !this.toolSrv.verifyIdNumber2.test(staffAdd.identity) || !this.toolSrv.verifyIdNumber3.test(staffAdd.identity) ): (toolSrv.verifyIdNumber.test(staffAdd.identity) || toolSrv.verifyIdNumber1.test(staffAdd.identity) || toolSrv.verifyIdNumber2.test(staffAdd.identity) || toolSrv.verifyIdNumber3.test(staffAdd.identity))"></p-message>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label >出生日期：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="staffAdd.birthday" placeholder="请选择出生日期..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"  yearRange="1900:2150" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addemail">E-mail：</label>
        </div>
        <div class="ui-g-8">
          <input id="addemail" type="email" pInputText placeholder="请输入邮箱" [(ngModel)]="staffAdd.email">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addrealName">地址：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText placeholder="请输入地址" [(ngModel)]="staffAdd.address">
        </div>
      </div>

      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addmobilePhone">是否可用：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown scrollHeight="100px" [options]="enableOption"  placeholder="请选择可用状态.." [(ngModel)]="staffAdd.enabled"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="educationalBackground">学历：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown id="educationalBackground"  [options]="educationalOption" scrollHeight="100px"  placeholder="请选择学历.." [(ngModel)]="staffAdd.educationalBackground"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addworkingYears">工龄：</label>
        </div>
        <div class="ui-g-8">
          <input id="addworkingYears" type="number" pInputText placeholder="请输入工龄" [(ngModel)]="staffAdd.workingYears">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label >入职时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="staffAdd.hiredate" placeholder="请选择入职时间..." [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"   yearRange="1900:2150" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="nativePlace">籍贯：</label>
        </div>
        <div class="ui-g-8">
          <input id="nativePlace" type="text" pInputText placeholder="请输入籍贯" [(ngModel)]="staffAdd.nativePlace">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="politicalStatus">政治面貌：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown id="politicalStatus"   [options]="politicalStatusOption" scrollHeight="100px"  placeholder="请选择政治面貌.." [(ngModel)]="staffAdd.politicalStatus"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="maritalStatus">婚姻状况：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown id="maritalStatus"  [options]="maritalOption" scrollHeight="100px"  placeholder="请选择婚姻状况.." [(ngModel)]="staffAdd.maritalStatus"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="volk">民族：</label>
        </div>
        <div class="ui-g-8">
          <input id="volk" type="text" pInputText placeholder="请输入民族" [(ngModel)]="staffAdd.volk">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="technicalTitle">职称：</label>
        </div>
        <div class="ui-g-8">
          <input id="technicalTitle" type="text" pInputText placeholder="请输入职称" [(ngModel)]="staffAdd.technicalTitle">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="remarks">备注：</label>
        </div>
        <div class="ui-g-8">
          <textarea id="remarks" type="text" pInputText placeholder="请输入备注..." [(ngModel)]="staffAdd.remarks"></textarea>
        </div>
      </div>
    </div>
    </p-scrollPanel>

    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <button class="bf-staff-dialog-Btn bf-staff-dialog-Btn-sure" (click)="staffAddSureClick()">确认</button>
        <button class="bf-staff-dialog-Btn bf-staff-dialog-Btn-false" (click)="staffAddDialog=false;clearData()">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <!--修改弹窗-->
  <p-dialog header="信息修改" [(visible)]="staffModifayDialog" [width]="900" >
    <!--Content-->
    <p-scrollPanel [style]="{width:'100%',height: '70vh'}" styleClass="custombar">
    <div class="ui-g ui-fluid" [ngStyle]="{'line-height':'3vh'}">
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[0]}">
        <div class="ui-g-4" style="text-align: right">
          <label ><span style="color: red">*</span>部门名称：</label>
        </div>
        <div class="ui-g-8" [ngStyle]="{'line-height':'2vh'}">
          <input type="text" pInputText placeholder="请选择部门.." (click)="DepartTreeClick('modify')" [(ngModel)]="staffModifay.departmentName" (blur)="changeInput(staffModifay.departmentName, 0)"/>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[1]}">
        <div class="ui-g-4" style="text-align: right">
          <label for="addusername"><span style="color: red">*</span>用户名：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text"  disabled pInputText [placeholder]="staffModifay.username" [(ngModel)]="staffModifay.username" (blur)="changeInput(staffModifay.username, 1)">
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[2]}">
        <div class="ui-g-4" style="text-align: right">
          <label for="addrealName"><span style="color: red">*</span>真实姓名：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText [placeholder]="staffModifay.realName" [(ngModel)]="staffModifay.realName" (blur)="changeInput(staffModifay.realName, 2)">
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[3]}">
        <div class="ui-g-4" style="text-align: right">
          <label ><span style="color: red">*</span>性别：</label>
        </div>
        <div class="ui-g-8">
          <p-radioButton type="radio" label="男"  value="男" name="group"  [(ngModel)]="staffModifay.sex" (onClick)="changeInput(staffModifay.sex, 3)"></p-radioButton>
          <p-radioButton type="radio" label="女"  value="女" name="group" [ngStyle]="{'margin-left':'2vw'}" [(ngModel)]="staffModifay.sex" (onClick)="changeInput(staffModifay.sex, 3)"></p-radioButton>
        </div>
      </div>
      <div class="ui-g-6" [ngClass]="{InputKeyFilter: this.keyRoomInfoList[4]}" >
        <div class="ui-g-4" style="text-align: right">
          <label for="addmobilePhone"><span style="color: red">*</span>手机号码：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText [placeholder]="staffModifay.mobilePhone" [(ngModel)]="staffModifay.mobilePhone" (blur)="changeInput(staffModifay.mobilePhone, 4)">
          <p-message  severity="error" text="请输入符合规定的11位手机号(13/17/14/15/18开头的格式)" [hidden]="(staffModifay.mobilePhone === undefined || staffModifay.mobilePhone === '')? !toolSrv.verifyPhone.test(staffModifay.mobilePhone): toolSrv.verifyPhone.test(staffModifay.mobilePhone)"></p-message>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addidentity">身份证号：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText [placeholder]="staffModifay.identity" [(ngModel)]="staffModifay.identity">
          <p-message  severity="error" text="请输入符合规定的身份证号码" [hidden]="(staffModifay.identity === undefined || staffModifay.identity === '')? (!this.toolSrv.verifyIdNumber.test(staffModifay.identity) || !this.toolSrv.verifyIdNumber1.test(staffModifay.identity) || !this.toolSrv.verifyIdNumber2.test(staffModifay.identity) || !this.toolSrv.verifyIdNumber3.test(staffModifay.identity) ): (toolSrv.verifyIdNumber.test(staffModifay.identity) || toolSrv.verifyIdNumber1.test(staffModifay.identity) || toolSrv.verifyIdNumber2.test(staffModifay.identity) || toolSrv.verifyIdNumber3.test(staffModifay.identity))"></p-message>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label >出生日期：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="staffModifay.birthday" [placeholder]="staffAdd.birthday" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"   yearRange="1900:2150" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addemail">E-mail：</label>
        </div>
        <div class="ui-g-8">
          <input type="text" pInputText [placeholder]="staffModifay.email" [(ngModel)]="staffModifay.email">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addrealName">地址：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText [placeholder]="staffModifay.address" [(ngModel)]="staffModifay.address">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addmobilePhone">是否可用：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown scrollHeight="100px" [options]="enableOption"  [placeholder]="enableModifyDrapPlaceholder" [(ngModel)]="staffModifay.enabled"></p-dropdown>
        </div>
      </div>

      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="educationalBackground">学历：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown   [options]="educationalOption" scrollHeight="100px"  [placeholder]="educationalModifyDrapPlaceholder" [(ngModel)]="staffModifay.educationalBackground"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="addworkingYears">工龄：</label>
        </div>
        <div class="ui-g-8">
          <input  type="number" pInputText [placeholder]="staffModifay.workingYears" [(ngModel)]="staffModifay.workingYears">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label >入职时间：</label>
        </div>
        <div class="ui-g-8">
          <p-calendar [(ngModel)]="staffModifay.hiredate" [placeholder]="staffModifay.hiredate" [monthNavigator]="true" [yearNavigator]="true" dateFormat="yy-mm-dd"   yearRange="1900:2150" [locale]="esDate"></p-calendar>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="nativePlace">籍贯：</label>
        </div>
        <div class="ui-g-8">
          <input type="text" pInputText [placeholder]="staffModifay.nativePlace" [(ngModel)]="staffModifay.nativePlace">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="politicalStatus">政治面貌：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown    [options]="politicalStatusOption" scrollHeight="100px" [placeholder]="politicalStatusModifyDrapPlaceholder" [(ngModel)]="staffModifay.politicalStatus"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="maritalStatus">婚姻状况：</label>
        </div>
        <div class="ui-g-8" style="line-height: 2vh">
          <p-dropdown  [options]="maritalOption" scrollHeight="100px"  [placeholder]="maritalModifyDrapPlaceholder" [(ngModel)]="staffModifay.maritalStatus"></p-dropdown>
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="volk">民族：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText [placeholder]="staffModifay.volk" [(ngModel)]="staffModifay.volk">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="technicalTitle">职称：</label>
        </div>
        <div class="ui-g-8">
          <input  type="text" pInputText [placeholder]="staffModifay.technicalTitle" [(ngModel)]="staffModifay.technicalTitle">
        </div>
      </div>
      <div class="ui-g-6">
        <div class="ui-g-4" style="text-align: right">
          <label for="remarks">备注：</label>
        </div>
        <div class="ui-g-8">
          <textarea  type="text" pInputText [placeholder]="staffModifay.remarks" [(ngModel)]="staffModifay.remarks"></textarea>
        </div>
      </div>
    </div>
    </p-scrollPanel>

    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix" style="text-align: center">
        <button class="bf-staff-dialog-Btn bf-staff-dialog-Btn-sure" (click)="staffModifySureClick()">确认</button>
        <button class="bf-staff-dialog-Btn bf-staff-dialog-Btn-false" (click)="staffModifayDialog=false; clearData()">取消</button>
      </div>
    </p-footer>
  </p-dialog>

  <!--区域选择-->
  <p-dialog header="请选择部门" [(visible)]="departDialog"  [width]="300" [height]="400">
    <div class="ui-g ui-fluid">
      <div class="ui-g-12">
        <!--(onNodeUnselect)="nodeUnselect($event)"-->
        <p-scrollPanel [style]="{width: '100%', height: '300px'}">
          <p-tree
            [value]="departTrees"
            selectionMode="single"
            [(selection)]="departTree"
            (onNodeSelect)="treeOnNodeSelect($event)"
          >
          </p-tree>
        </p-scrollPanel>
      </div>
    </div>
    <p-footer>
      <div class="ui-dialog-buttonpane ui-helper-clearfix">
        <button class="bf-staff-dialog-Btn bf-staff-dialog-Btn-sure" type="button" (click)="treeSelectDepartClick()">确定</button>
        <button class="bf-staff-dialog-Btn bf-staff-dialog-Btn-false" type="button" (click)="departDialog=false">取消</button>
      </div>
    </p-footer>
  </p-dialog>
  <rbi-detail-pop [dialogOption]="dialogOption"></rbi-detail-pop>
  <rbi-paging [option]="option" (pageClick)="nowpageEventHandle($event)"></rbi-paging>
</div>
